<template>
    <div>
        <div class="footerbar">
            <div class="footer">
                <div class="item" @click="showFn">
                    <i class="iconfont icon-gouwuche"></i>
                </div>
                <p class="itemP1">￥ {{allPrice}}</p>
                <p class="itemP2">另需配送费￥4元</p>
            </div>  
            <div class="footerPay" :style="{'background-color': allPrice>=20?'#007ACC' : ''}">￥20元起送</div>
            <div class="titlebar" v-show="allNum">
                {{allNum}}
            </div>
        </div>
        <!-- 购物车列表 -->
        <app-shopcar :list="list" v-show="isceck"></app-shopcar>
        <!-- 遮罩 -->
        <van-overlay z-index="6" :show="isceck" @click="overlayFn" />
        <!-- 购物车动画 -->
        <app-ball></app-ball>
    </div>
</template>

<script>
import Vue from 'vue';
import { Overlay } from 'vant';

Vue.use(Overlay);
import shopcar from "components/shopcar"
import ball from "components/ball"
export default {
    name:"pay",
    components:{
        "app-shopcar":shopcar,
        "app-ball":ball
    },
    data(){
        return{
            isceck:false,
            list:[]
        }
    },
    computed:{
        allPrice(){
            const all = this.list.map(({price,num})=>(price*num))
            const num = all.reduce((val1,val2)=>{
                return val1+val2
            },0)
            return num;
        },
        allNum(){
            const all = this.list.map(({num})=>(num))
            const num = all.reduce((val1,val2)=>{
                return val1+val2
            },0)
            return num;
        }
    },
    methods:{
        showFn(){
            if(this.list.length>=1){
                if(this.isceck){
                    this.isceck = false;
                    return;
                }
                this.isceck = true;
            }
            
        },
        overlayFn(){
            this.isceck = false;
        }
    },
    mounted(){
        this.$bus.$on("newList",(data)=>{
            this.list = data
        });
        this.$bus.$on("clearFn",()=>{
            this.isceck = false;
        })
    },
    beforeDestroy(){
        this.$bus.$off("newList")
    }
}
</script>

<style lang="less" scope>
.footerbar{
        width: 100%;
        display:flex;
        justify-content:space-between;
        align-items: center;
        background-color:#141d27;
        position: relative;
        // position: fixed;
        // bottom:0;
        z-index: 10;
        .footer{
            display:flex;
            align-items: center;
            .item{
                position: absolute;
                top: -0.2rem;
                width: 0.88rem;
                height: 0.88rem;
                border-radius: 50%;
                background-color:rgb(0, 0, 0,.2);
                line-height:1.1rem;
                margin: 0.16rem 0.36rem 0;
                margin-top: 0.12rem;
                text-align: center;
                i{
                    font-size: 0.48rem;
                    color:rgb(255, 255, 255,0.4);
                    line-height: 0.48rem;
                }
            }
            .itemP1{
                font-size: 0.32rem;
                color: rgb(255, 255, 255,.4);
                font-weight: 700;
                line-height: 0.48rem;
                width: 1rem;
                padding: 0.24rem 0 0.24rem 1.4rem;
                
            }
            .itemP2{
                font-size: 0.32rem;
                color: rgb(255, 255, 255,.4);
                font-weight: 700;
                line-height: 0.48rem;
                border-left: 0.01rem solid rgb(255, 255, 255,0.1);
                padding-left: 0.24rem;
            }
        }
        .footerPay{
            font-size: 0.24rem;
            color: rgba(255,255,255, 0.4);
            background-color:#242b33;
            font-weight: 700;
            height: 0.96rem;
            line-height: 0.96rem;
            text-align: center;
            padding: 0 0.16rem;
            margin-left: 0.24rem;
            width:1.78rem;
        }
        .titlebar{
            background-color:rgb(240,20,20);
            box-shadow: 0 0.04rem 0.08rem 0 rgba(0,0,0,0.4);
            width: 0.48rem;
            font-size: 0.18rem;
            font-weight: 700;
            color: rgb(255,255,255);
            line-height: 0.32rem;
            border-radius: 0.2rem;
            text-align:center;
            position: absolute;
            left: 0.88rem;
            bottom: 0.8rem;
        }
    }
</style>